<template>
  <el-form :model="form" label-width="120px">
    <el-row :gutter="20">
      <div class="urgent-message">
        <div class="blue-vertical-line"></div>
        <span class="message-text">老人基本信息</span>
      </div>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="姓名">
          <el-input v-model="form.name" disabled></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="档案号">
          <el-input v-model="form.userNum" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="性别">
          <el-radio-group v-model="form.gender" disabled>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="年龄">
          <el-input v-model="form.age" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="出生日期">
          <el-input v-model="form.birthday" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="身份证号">
          <el-input v-model="form.identity" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="现住地址">
          <el-cascader
            placeholder="请选择"
            v-model="form.currentAddress"
            :options="addressOptions"
            clearable
            filterable
            disabled
          ></el-cascader>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="详细地址">
          <el-input v-model="form.address" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="监护人">
          <el-input v-model="form.emergencyContact" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="监护人电话">
          <el-input v-model="form.emergencyTel" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="担保人">
          <el-input v-model="form.emergencyContact2" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="担保人电话2">
          <el-input v-model="form.emergencyTel2" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <div class="urgent-message">
        <div class="blue-vertical-line"></div>
        <span class="message-text">登记信息</span>
      </div>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="服务类型">
          <el-input v-model="form.projectName" disabled></el-input>
        </el-form-item>
        <el-form-item label="护理类型">
          <el-input v-model="form.nursingName" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="护工">
          <el-input v-model="form.porterName" disabled></el-input>
        </el-form-item>
        <el-form-item label="责任护士">
          <el-input v-model="form.nurseName" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="主管医师">
          <el-input v-model="form.doctorNum" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="区域/室/床">
          <el-input v-model="form.areaNum" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-form-item label="入院诊断">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入"
            v-model="form.admissionDiagnosis" disabled
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-form-item label="入住原因">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入"
            v-model="form.reasonForIn" disabled
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <div class="urgent-message">
        <div class="blue-vertical-line"></div>
        <span class="message-text">缴费信息</span>
      </div>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="付费方式"> 
          <el-input v-model="form.payStatus" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="预存金额">
          <el-input v-model="form.saveMoney" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <div>
    <el-button type="primary" @click="back">返回</el-button>
    </div>
  </el-form>

</template>
  
  <script>
export default {
  data() {
    return {
      addressOptions: [
        {
          value: "省份ID",
          label: "省份名称",
          children: [
            {
              value: "城市ID",
              label: "城市名称",
              children: [
                {
                  value: "县区ID",
                  label: "县区名称",
                },
                // 更多县区...
              ],
            },
            // 更多城市...
          ],
        },
        // 更多省份...
      ],
      form: {},
    };
  },
  methods: {
    back(){
      this.$router.push({ path: "/userin" });
    },
    getLocations() {
      this.$axios.get("api/location/queryLocation").then((response) => {
        function removeChildrenForCounties(options) {
          for (const option of options) {
            if (option.children) {
              // 如果children是一个空数组，删除它
              if (option.children.length === 0) {
                delete option.children;
              }
              // 否则，递归处理下一级的选项
              else {
                removeChildrenForCounties(option.children);
              }
            }
          }
        }

        this.addressOptions = response.data.data;
        removeChildrenForCounties(this.addressOptions);
      });
    },
    dataProcessing() {
      this.form = this.$route.query.form;
      if (this.form.payStatus === 0) {
        this.form.payStatus = "自费";
      } else if (payStatus === 1) {
        this.form.payStatus = "城乡职工医疗险";
      } else if (payStatus === 2) {
        this.form.payStatus = "城乡居民医疗险";
      } else if (payStatus === 3) {
        this.form.payStatus = "公费医疗照顾对象";
      } else if (payStatus === 4) {
        this.form.payStatus = "公务员补助";
      } else {
        this.form.payStatus = "其他";
      }
      this.form.areaNum =
        this.form.areaNum + "/" + this.form.roomnum + "/" + this.form.bedNum;
      console.log(this.form);
      if (typeof this.form.currentAddress === "string") {
        this.form.currentAddress = this.form.currentAddress
          .split(", ")
          .map(function (item) {
            return parseInt(item, 10); // 第二个参数为进制基数，10代表十进制
          });
      }
    },
  },
  created() {
    this.getLocations();
    this.dataProcessing();
  },
};
</script>
  
<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.avatar {
  width: 120px; /* 调整为你需要的宽度 */
  height: 120px; /* 调整为你需要的高度 */
  object-fit: cover; /* 这条语句会使图片以 "cover" 模式显示，保持图片的本身比例长宽比，裁剪超出部分 */
}
.urgent-message {
  background-color: #cfe8ff; /* 淡蓝色背景 */
  color: #1890ff; /* 蓝色字体颜色 */
  padding: 10px;
  border: 1px solid #91d5ff; /* 淡蓝色边框 */
  border-radius: 5px;
  display: flex;
  align-items: center;
}

.info-icon {
  color: #1890ff; /* 蓝色图标颜色 */
  margin-right: 10px;
}

.message-text {
  font-weight: bold; /* 加粗字体 */
}

.right-align {
  text-align: right; /* 将内容右对齐 */
}

.blue-vertical-line {
  border-left: 3px solid blue; /* 设置竖线宽度和颜色 */
  height: 15px; /* 设置竖线高度，根据你的需要调整 */
  margin-right: 10px; /* 可选：设置竖线右边距，根据你的需要调整 */
}

.select-older-button {
  text-align: left; /* 将按钮左对齐 */
}
</style>